<template>
    <el-container class="main-container">
        <!-- 头部 -->
        <el-header class="header">
            <div class="logo">
                <img src="/22adc567-87ed-441e-838d-d9564393b1b0.jpeg" alt="Logo" class="logo-img">
                <span class="logo-text">后台管理系统</span>
            </div>
            <div class="header-right">
                <span class="welcome-text">欢迎你, {{ adminname }}</span>
                <el-button type="primary" @click="handleLogout">退出</el-button>
            </div>
        </el-header>

        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px" class="sidebar">
                <el-menu :router="true" :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleMenuSelect">
                    <el-menu-item index="home">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-goods"></i>
                            <span>商品管理</span>
                        </template>
                        <el-menu-item index="publishGoods">发布商品</el-menu-item>
                        <el-menu-item index="goodsList">商品列表</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-plus"></i>
                            <span>采购管理</span>
                        </template>
                        <el-menu-item index="purchaseApply">采购单申请</el-menu-item>
                        <el-menu-item index="purchaseReview">采购单审核</el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-upload2"></i>
                            <span>入库管理</span>
                        </template>
                        <el-menu-item index="warehouseInApply">入库单申请</el-menu-item>
                        <el-menu-item index="warehouseInReview">入库单审核</el-menu-item>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-download"></i>
                            <span>出库管理</span>
                        </template>
                        <el-menu-item index="warehouseOutApply">出库单申请</el-menu-item>
                        <el-menu-item index="warehouseOutReview">出库单审核</el-menu-item>
                    </el-submenu>
                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-office-building"></i>
                            <span>仓库管理</span>
                        </template>
                        <el-menu-item index="warehouseList">仓库列表</el-menu-item>
                        <el-menu-item index="addWarehouse">新增仓库</el-menu-item>
                    </el-submenu>
<!--                    <el-submenu index="7">-->
<!--                        <template slot="title">-->
<!--                            <i class="el-icon-user"></i>-->
<!--                            <span>用户管理</span>-->
<!--                        </template>-->
<!--                        <el-menu-item index="userList">用户列表</el-menu-item>-->
<!--                        <el-menu-item index="addUser">新增用户</el-menu-item>-->
<!--                    </el-submenu>-->
                    <el-submenu index="8">
                        <template slot="title">
                            <i class="el-icon-truck"></i>
                            <span>供货商管理</span>
                        </template>
                        <el-menu-item index="supplierList">供货商列表</el-menu-item>
                        <el-menu-item index="supplierReview">审核供货商</el-menu-item>
                    </el-submenu>
                    <el-submenu index="9">
                        <template slot="title">
                            <i class="el-icon-shop"></i>
                            <span>商户管理</span>
                        </template>
                        <el-menu-item index="merchantList">商户列表</el-menu-item>
                        <el-menu-item index="addMerchant">商户审核</el-menu-item>
                    </el-submenu>
                    <el-submenu index="10">
                        <template slot="title">
                            <i class="el-icon-shop"></i>
                            <span>商品分类管理</span>
                        </template>
                        <el-menu-item index="infoClassify">分类列表</el-menu-item>
                    </el-submenu>
                    <el-submenu index="11">
                        <template slot="title">
                            <i class="el-icon-shop"></i>
                            <span>轮播图管理</span>
                        </template>
                        <el-menu-item index="carouselInfo">轮播图列表</el-menu-item>
                        <el-menu-item index="addCarousel">轮播图添加</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <!-- 主体内容 -->
            <el-main class="main-content">
                <router-view></router-view>
            </el-main>
        </el-container>

    </el-container>
</template>

<script>
export default {
    data() {
        return {
            adminname: '', // 从Vuex或本地存储获取
            activeMenu: 'home' // 默认选中首页
        };
    },
    methods: {
        handleLogout() {
            // 退出逻辑
            this.$router.push('/hoTaiLogin');
        },
        handleMenuSelect(index) {

        }
    },
    created() {
        // 从Vuex或本地存储获取用户名
        this.adminname = window.sessionStorage.getItem('token');
    }
};
</script>

<style scoped>
.main-container {
    height: 100vh;
}

.header {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.logo-text {
    font-size: 20px;
    font-weight: bold;
    color: #409eff;
}

.header-right {
    display: flex;
    align-items: center;
}

.welcome-text {
    margin-right: 20px;
}

.sidebar {
    background: #f8f9fa;
}

.main-content {
    padding: 20px;
    background: #f0f2f5;
}
</style>